<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>运动四</title>
		<style type="text/css">
			*{margin: 0; padding: 0;}
			div{
				width: 100px;
				height: 100px;
				background: red;
				position: absolute;
				top: 50px;
				left: 50px;
				opacity: 0.07;
			}
		</style>
		<script type="text/javascript">
			//距离 时间 速度
			window.onload = function()
			{
				var oBox = document.getElementById('box');
				oBox.onclick = function()
                {
                	move(oBox,'opacity',1,3000);
                	move(oBox,'left',500,1000);
                	
                }
                
                function move(obj,sName,target,time)
                {
                	var n = 0;
                	var count = parseInt(time/30);
                	var start = parseFloat(getStyle(obj,sName)) ;
                	var dis = target - start;
                	
                	var timer = setInterval(function(){
                		n++;
                		
                		if(sName == 'opacity'){
                			obj.style[sName] = start+dis*n/count;
                		}else{
                			obj.style[sName] = start+dis*n/count+'px';
                		}
                		
                		if (n == count){
							clearInterval(timer);
                			
                		}
                	},30);
                }
                function getStyle(obj,sName)
                {
                	return obj.currentStyle ? obj.currentStyle(sName) : getComputedStyle(obj,false)[sName];
                }
			}
		</script>
	</head>
	<body>
		<div id="box"></div>
	</body>
</html>
